<template>
  <el-row type="flex" justify="center" align="middle" style="margin-top: 20px;">
    <el-col :span="12">
      <div class="centered">
        <el-tabs type="border-card">
          <el-tab-pane label="账号">
            <UserInfo />
          </el-tab-pane>
          <el-tab-pane label="公司信息">
            <el-row type="flex" justify="center" align="middle" styl e="margin-top: 20px;">
              <el-col :span="12">
                <el-form :model="company" ref="company" label-width="80px" :inline="false" size="normal">
                  <el-form-item label="公司名称">
                    <el-input v-model="company.companyName"></el-input>
                  </el-form-item>
                  <el-form-item label="简介">
                    <el-input v-model="company.introduction" type="textarea" :rows="5" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认修改</el-button>
                  </el-form-item>
                </el-form>

              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="位置">
            <LocationComp />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import UserInfo from "@/components/UserInfo";
import LocationComp from "@/components/LocationComp";
export default {
  created() {
    this.form = this.$store.getters.currentUser;
    this.$axios.get('/company/' + this.form.id).then(
      res => {
        if (res.code === 200) {
          console.log(res.data)
          this.company = res.data
          console.log(this.company)
        }
      }
    )
  },
  components: {
    UserInfo,LocationComp
  },
  data() {
    return {
      form:{},
      company: null,
      center: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15,
      remark: ''
    }
  },
  methods: {
    syncCenterAndZoom(e) {
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    onSubmit() {
      this.$axios.post('/company', this.company).then(
        res => {
          if (res.code === 200) {
            this.$message.success("修改OK")
          }
        }
      )
    },
    updateLocation(){
      this.$axios.post('/location', {remark:this.remark,lat:this.center.lat,lng:this.center.lng,userId:this.form.id}).then(
        res => {
          if (res.code === 200) {
            this.$message.success("更新位置OK")
          }
        }
      )
    }
  }
}
</script>

